import React from "react";
import { Spin, List, Card, Space, Breadcrumb, message, Tooltip } from "antd";
import { QrcodeOutlined, ArrowRightOutlined } from "@ant-design/icons";
import { Link } from "react-router-dom";
import { connect } from "react-redux";

import "./exp.css";

import { _selStuExping } from "../../../../utils/exp/index";


class Index extends React.Component {
  state = {
    isLoading: false,
    exp_num: "",
    data: [],
  };

  componentDidMount = () => {
    this.getData();
  };
  getData = () => {
    // console.log(this.props.state.data.tch_id);
    // console.log("search:", val);
    this.setState({ isLoading: true });
    _selStuExping(this.props.state.data.stu_id)
      .then((res) => {
        if (res.status === 200 && res.data.code === 0) {
          this.setState({ isLoading: false });
          this.setState({
            data: res.data.data,
          });
        }
      })
      .catch(() => {
        this.setState({ isLoading: false });
        message.error("服务器错误");
      });
  };

  render() {
    return (
      <div>
        <div className="stu-header">
          <Breadcrumb style={{ margin: "16px 0" }}>
            <Breadcrumb.Item>首页</Breadcrumb.Item>
            <Breadcrumb.Item>实验(进行中)</Breadcrumb.Item>
          </Breadcrumb>
        </div>

        <div className="admin-body" style={{ padding: 15, minHeight: 360 }}>
          <Spin tip="Loading..." spinning={this.state.isLoading}>
            <List
              grid={{
                gutter: 16,
                xs: 1,
                sm: 2,
                md: 2,
                lg: 3,
                xl: 3,
                xxl: 4,
              }}
              pagination={{
                onChange: (page) => {},
                pageSize: 6,
              }}
              dataSource={this.state.data}
              renderItem={(v) => (
                <List.Item>
                  <Link to={{ pathname: "/admin/s-e-d", state: v }}>
                    <Card
                      title={
                        <Tooltip title={v.exp_msg}>
                          <div className="card-header">
                            {v.exp_name}

                            <p>（{v.exp_class}）</p>
                          </div>
                        </Tooltip>
                      }
                      bordered={false}
                      headStyle={{
                        background: `${v.exp_style}`,
                        fontSize: "16px",
                        color: "#f6f6f6",
                        boxShadow: "5px 7px 23px 0px rgba(58, 52, 82, 0.16)",
                        borderTopLeftRadius: "5px",
                        borderTopRightRadius: "5px",
                      }}
                      bodyStyle={{
                        padding: "10px",
                        boxShadow: "5px 7px 23px 0px rgba(58, 52, 82, 0.16)",
                        borderBottomLeftRadius: "5px",
                        borderBottomRightRadius: "5px",
                      }}
                    >
                      <div className="card-body">
                        <div>
                          <span>年级：</span>
                          {v.exp_grade}
                        </div>
                        <div>
                          <span>教师：</span>
                          {v.tch_name}
                        </div>
                        <div>
                          <span>专业：</span>
                          {v.exp_class}
                        </div>
                        <div>
                          <span>实验时间：</span>
                          {v.exp_time}
                        </div>
                        <div className="card-footer">
                          <div>
                            <Space size="large">
                              <Space>
                                <QrcodeOutlined
                                  style={{ color: "#1890ff", fontSize: 14 }}
                                />
                                {v.exp_num}
                              </Space>
                            </Space>
                          </div>
                          <div
                            // onClick={this.endExp.bind(this, v.exp_id)}
                            className="exp-join"
                          >
                            <Space>
                              <ArrowRightOutlined
                                style={{ color: "#1890ff", fontSize: 14 }}
                              />
                              进入
                            </Space>
                          </div>
                        </div>
                      </div>
                    </Card>
                  </Link>
                </List.Item>
              )}
            />
          </Spin>
        </div>
      </div>
    );
  }
}
const mapStateToProps = (state) => {
  return {
    state: state.user,
  };
};
const actionCreator = {};
export default connect(mapStateToProps, actionCreator)(Index);
